<template>
	<view>
		<view class="upload">
			<image src="/static/sc.png" mode=""></image>
			<view class="upload1">点击选择文件</view>
			<view class="upload2">支持从微信聊天选择（PDF、Word）</view>
		</view>
		<view class="textareas">
			<!--  -->
			<uni-easyinput type="textarea" v-model="introduction" placeholder="请输入或粘贴文本" />
		</view>
		<view class="footer">
			<view class="footer3">
				<uni-data-checkbox v-model="hobby" multiple :localdata="hobbys" />
				阅读并同意《隐私协议》《用户协议》
			</view>
			<view class="footer2" @click="xuanze()">开始检测</view>
			<view class="footer1">用户文书只供一次性评测使用我们不会存储任何内容</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="shenfen">
				<view class="shenfens">
					<image></image>
					<text>请选择身份</text>
					<image src="/static/remove.png" mode="" @click="close"></image>
				</view>
				<view class="shenfen1" v-for="(i) in user" :key="i.id">
					<image :src="i.img" mode=""></image>
					<view>{{i.name}}</view>
				</view>
				<view class="stnbom" @click="queding">确认</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				introduction: "",
				hobby: "",
				hobbys: [{
					"value": "1",
					"text": ""
				}],
				user: [{
						img: "/static/jia.png",
						name: "我是甲方",
						id: "1"
					},
					{
						img: "/static/yifang.png",
						name: "我是已方",
						id: "2"
					}
				]
			}
		},
		methods: {
			xuanze() {
				this.$refs.popup.open('center')
			},
			close() {
				this.$refs.popup.close()
			},
			queding() {
				this.$refs.popup.close()
				uni.navigateTo({
					url: "/pages/index/details"
				})
			}
		}
	}
</script>

<style lang="less">
	body {
		background-color: #F0F7FF;
	}

	.upload {
		width: 686rpx;
		height: 400rpx;
		margin-left: 32rpx;
		background: #fff;
		border-radius: 20rpx;
		text-align: center;
		margin-top: 70rpx;
		box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(83, 163, 255, 0.33);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
	}

	.upload image {
		width: 100rpx;
		height: 100rpx;
		margin-top: 100rpx;
	}

	.upload1 {
		width: 550rpx;
		height: 72rpx;
		background: #20497B;
		box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(22, 61, 110, 0.34);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		text-align: center;
		line-height: 72rpx;
		margin-left: 60rpx;
		margin-top: 30rpx;
		color: #fff;
		font-weight: bold;
		font-size: 30rpx;
	}

	.upload2 {
		font-weight: 400;
		font-size: 24rpx;
		color: #4E5969;
		line-height: 24rpx;
		margin-top: 30rpx;
	}

	.textareas {
		width: 686rpx;
		height: 450rpx;
		margin-left: 32rpx;
		background: #fff;
		border-radius: 20rpx;
		text-align: center;
		margin-top: 70rpx;
		box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(83, 163, 255, 0.33);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		overflow: hidden;

		textarea {
			width: 640rpx;
			height: 415rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
			font-size: 28rpx;
			border-radius: 24rpx;
			color: #4E5969;
		}
	}

	.footer {
		width: 686rpx;
		position: absolute;
		bottom: 10rpx;
		margin-left: 32rpx;
		margin-top: 70rpx;

		.footer1 {
			width: 300rpx;
			margin-left: 194rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			padding-bottom: 40rpx;
			margin-top: 40rpx;
			text-align: center;
		}

		.footer2 {
			width: 686rpx;
			height: 88rpx;
			background: #20497B;
			box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(22, 61, 110, 0.34);
			border-radius: 16rpx;
			text-align: center;
			line-height: 88rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #FFFFFF;
			margin-bottom: 10rpx;
		}

		.footer3 {
			width: 100%;
			font-size: 24rpx;
			font-weight: 400;
			padding-bottom: 10rpx;
			color: #999999;
			display: flex;
			align-items: center;
		}

		/deep/.uni-data-checklist .checklist-group .checklist-box {
			margin-right: 0rpx;
		}
	}

	.shenfen {
		width: 600rpx;
		height: 508rpx;
		padding: 30rpx;
		background-color: #fff;
		// position:absolute;
		// top:50%;
		// margin-top:254rpx;
		// left:50%;
		// margin-left:-300rpx;
		border-radius: 24rpx;
		z-index: 999;
		text-align: center;
		box-sizing: border-box;
		background: linear-gradient(to bottom, #C8E1FF, #F7FBFF, #F7FBFF, #FFFFFF, #FFFFFF);
	}

	.shenfens {
		width: 100%;
		padding: 15rpx 15rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;

		image {
			width: 30rpx;
			height: 30rpx;
		}

		text {
			font-size: 34rpx;
			font-weight: bold;
			color: #000000;
		}
	}

	.shenfen1 {
		width: 100%;
		height: 84rpx;
		background: #F7F8FA;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}

		view {
			font-weight: 500;
			font-size: 30rpx;
			color: #1D2129;
		}
	}

	.stnbom {
		width: 100%;
		height: 72rpx;
		background: #20497B;
		box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(22, 61, 110, 0.34);
		border-radius: 16rpx;
		text-align: center;
		line-height: 72rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin-top: 50rpx;
	}
</style>